<template>
    <div class="avatar">
        <img
            :src="url || require('@/assets/images/default.png')"
            :onerror="defaultImg"
            :style="style"
        />
        <!-- <span class="name">
            {{ userInfo.name }}<i class="el-icon-caret-bottom"></i>
        </span> -->
    </div>
</template>

<script>
import image from "@/assets/images/default.png";

export default {
    name: "avatar",
    props: {
        url: {
            type: String,
            default: "",
        },
        height: {
            type: String,
            default: "",
        },
        width: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            defaultImg: 'this.src="' + image + '"',
        };
    },
    computed: {
        style() {
            return {
                width: this.width,
                height: this.height,
            };
        },
    },
};
</script>

<style lang="less" scoped>
.avatar {
    img {
        border-radius: 50%;
    }
}
</style>